<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
    <head>
        <base href="<%=basePath%>">
        <title>借阅管理界面</title>

        <link rel="stylesheet" type="text/css" href="css/user/returnDetail.css">

        <%-- 引入jquery --%>
        <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

        <%--  引入bootstrap框架--%>
        <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

        <%-- 引入Bootstrap datetimepicker插件 --%>
        <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
        <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

        <%-- 引入pagination --%>
        <link type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" rel="stylesheet"/>
        <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
        <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

        <script type="text/javascript">
            $(function (){
                // 调用查询页面函数
                queryBookInformationByPage(1,10);

                // 给查询书籍按钮添加单击事件
                $("#queryBooks").click(function (){
                    queryBookInformationByPage(1,$("#search_bo").bs_pagination('getOption','rowsPerPage'))
                });


                // 给确定归还按钮添加单击事件
                $("#body").on("click","button[name='borrowBookBtn']",function (){
                    // 收集表单数据
                    var borrowId=this.value;
                    // 发送请求
                    $.ajax({
                       url:'workbench/user/return/returnBook.do',
                        data:{
                           borrowId:borrowId
                        },
                        type:'post',
                        dataType:'json',
                        success:function (data){
                           if (data.code=="1"){
                               // 刷新列表
                               queryBookInformationByPage(1,$("#search_bo").bs_pagination('getOption','rowsPerPage'));
                           }else{
                               alert(data.message);
                           }
                        }
                    });
                });
            });

            // 根据条件查询所有的书籍信息
            function queryBookInformationByPage(pageNo,pageSize) {
                // 收集表单
                var bookAccount = $.trim($("#book_account").val());
                var author = $.trim($("#author").val());
                var bookName = $.trim($("#book_name").val());

                // 发送ajax请求查询信息
                $.ajax({
                    url: 'workbench/user/return/queryNeedReturnBookInfo.do',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        bookName: bookName,
                        author: author,
                        bookAccount: bookAccount,
                        pageNo: pageNo,
                        pageSize: pageSize
                    },
                    success: function (res) {
                        var str = "";
                        str += "<tr>";
                        str += "<td>ISBN</td>";
                        str += "<td>书籍名称</td>";
                        str += "<td>作者</td>";
                        str += "<td>出版社</td>";
                        str += "<td>价格</td>";
                        str += "<td>操作</td>";
                        str += "</tr>";
                        // 渲染页面
                        $.each(res.borrows, function (index, obj) {
                            str += "<tr>";
                            str += "<td>" + obj.bookAccount + "</td>";
                            str += "<td>" + obj.bookName + "</td>";
                            str += "<td>" + obj.author + "</td>";
                            str += "<td>" + obj.publisher + "</td>";
                            str += "<td>" + obj.price + "</td>";
                            str += "<td><button name=\"borrowBookBtn\" value=\"" + obj.borrowId + "\">归还</button></td>";
                            str += "</tr>";
                        });
                        $("#body").html(str);
                        // 计算总页数
                        var totalPages = Math.ceil(res.totalRows / pageSize);
                        // 对容器调用bs_pagination工具函数，显示翻页信息
                        $("#search_bo").bs_pagination({
                            currentPage: pageNo, // 当前页号，默认值1，相当于pageNo
                            // 必须满足 totalRows=totalPages*rowsPerPage
                            totalPages: totalPages, // 总页数，必填项
                            rowsPerPage: pageSize, // 每页显示条数，默认是10，相当于pageSize
                            totalRows: res.totalRows, // 总条数，默认值是1000
                            visiblePageLinks: 5, //最多可以显示的一组卡片数，默认是5
                            showGoToPage: true, // 是否显示跳转到第几页部分，默认是true
                            showRowsPerPage: true, // 是否显示每页显示条数部分，默认是true
                            showRowsInfo: true, //是否显示记录的信息部分，默认是true
                            // 用户每次切换页面的时候执行函数
                            // 该函数返回切换页号之后的pageNo和pageSize
                            onChangePage: function (event, pageObj) {
                                queryBookInformationByPage(pageObj.currentPage, pageObj.rowsPerPage);
                            }
                        })
                    }
                })
            }

        </script>
    </head>
    <body>

        <!--主窗口-->
        <div class="body_right">
            <div id="search">
                <div id="search_head">
                    <form id ="form1" method="post" action="AddRecordServlet">
                        <span>ISBN</span><input class="search_in" id="book_account" type="text"/>
                        <span>图书名称</span><input class="search_in" id="book_name" type="text"/>
                        <span>作者</span><input class="search_in" id="author" type="text"/>
                        <input class="search_id" type="button" id="queryBooks" value="查询书籍">
                    </form>
                </div>

                <div id="search_body">
                    <table border="1px" id="body">

                    </table>
                </div>

                <div id="search_bo">

                </div>
            </div>
        </div>
    </body>
</html>
